import { useEffect, useContext } from 'react'
import { alphaTypes, singerTypes, areaTypes } from '../../api/config'
import { NavContainer, ListContainer, List, ListItem, SelectBox } from './style'
import Scroll from '../../baseUI/scroll'
import Horizontal from '../../baseUI/horizontal'
import * as actionTypes from './store/actionCreator'
import { connect } from 'react-redux'
import {
  CHANGE_TYPE,
  CHANGE_AREA,
  CHANGE_ALPHA,
  CategoryDataContext,
  Data
} from './data'
import Loading from '../../baseUI/loading/index'
import { renderRoutes } from 'react-router-config'

const mapStateToProps = state => ({
  singerList: state.getIn(['singers', 'singerList']).toJS(),
  enterLoading: state.getIn(['singers', 'enterLoading']),
  pullUpLoading: state.getIn(['singers', 'pullUpLoading']),
  pullDownLoading: state.getIn(['singers', 'pullDownLaoding']),
  // alpha: state.getIn(['singers', 'alpha']),
  // type: state.getIn(['singers', 'type']),
  // area: state.getIn(['singers', 'area']),
  offset: state.getIn(['singers', 'offset'])
})

const mapDispatchToProps = dispatch => {
  return {
    // handleAlphaUpdate(e) {
    //   dispatch(actionTypes.changeEnterLoading(true))
    //   dispatch(handleAlphaUpdate(e.target.innerText))
    // },
    // handleTypeUpdate(e) {
    //   dispatch(actionTypes.changeEnterLoading(true))
    //   dispatch(handleTypeUpdate(e.target.value))
    // },
    updateDispatch(type, area, alpha) {
      dispatch(actionTypes.changeOffset(0))
      dispatch(actionTypes.changeEnterLoading(true))
      dispatch(actionTypes.getSingerList(type, area, alpha))
    },
    // handleAreaUpdate(e) {
    //   dispatch(actionTypes.changeEnterLoading(true))
    //   dispatch(actionTypes.handleAreaUpdate(e.target.value))
    // },
    getHotSingerDispatch() {
      dispatch(actionTypes.changeEnterLoading(true))
      dispatch(actionTypes.getHotSingerList())
    },
    pullUpRefreshDispatch(type, area, alpha) {
      dispatch(actionTypes.changePullUpLoading(true))
      if (type === '-1' && area === '-1' && alpha === '') {
        dispatch(actionTypes.refreshMoreHotSingerList(type, area, alpha))
      } else {
        dispatch(actionTypes.refreshMoreSingerList(type, area, alpha))
      }
    },
    pullDownRefreshDispatch(type, area, alpha) {
      dispatch(actionTypes.changePullDownLoading(true))
      if (type === '-1' && area === '-1' && alpha === '') {
        dispatch(actionTypes.getHotSingerList())
      } else {
        dispatch(actionTypes.getSingerList(type, area, alpha))
      }
    }
  }
}

function Singers(props) {
  const {
    singerList,
    enterLoading,
    // type,
    // area,
    offset,
    // alpha,
    pullUpLoading,
    pullDownLoading
  } = props
  const {
    // handleAlphaUpdate,
    // handleAreaUpdate,
    // handleTypeUpdate,
    updateDispatch,
    getHotSingerDispatch,
    pullUpRefreshDispatch,
    pullDownRefreshDispatch
  } = props

  const { data, dispatch } = useContext(CategoryDataContext)
  const { type, area, alpha } = data.toJS()

  const handleTypeUpdate = e => {
    const data = e.target.value

    dispatch({ type: CHANGE_TYPE, data: data })
    updateDispatch(data, area, alpha)
  }

  const handleAreaUpdate = e => {
    const data = e.target.value

    dispatch({ type: CHANGE_AREA, data: data })
    updateDispatch(type, data, alpha)
  }

  const handleAlphaUpdate = e => {
    const data = e.target.innerText

    dispatch({ type: CHANGE_ALPHA, data: data })
    updateDispatch(type, area, data)
  }
  const handlePullUp = () => {
    pullUpRefreshDispatch(type, area, alpha)
  }
  const handlePullDown = () => {
    pullDownRefreshDispatch(type, area, alpha, offset)
  }

  const enterDetail = id => {
    props.history.push(`singers/${id}`)
  }

  const renderSingerList = singerList => {
    return (
      <List>
        {singerList.map((item, index) => {
          return (
            <ListItem
              key={'' + item.accountId + index}
              onClick={() => {
                enterDetail(item.id)
              }}
            >
              <div className="img-wrapper">
                <img
                  src={`${item.picUrl}?param=300x300`}
                  width="100%"
                  height="100%"
                  alt="song"
                />
              </div>
              <span className="name">{item.name}</span>
            </ListItem>
          )
        })}
      </List>
    )
  }

  useEffect(() => {
    // 仅挂载时执行一次
    if (!singerList.size) {
      getHotSingerDispatch()
    }
  }, [])

  return (
    <div>
      <Data>
        <NavContainer>
          {/* 方法一：使用下拉框选择歌手类别和地区 */}
          <SelectBox>
            <select
              name="singer-types"
              id="singer-types-select"
              value={type}
              onChange={handleTypeUpdate}
            >
              {singerTypes.map(item => {
                return (
                  <option key={item.id} value={item.id}>
                    {item.name}
                  </option>
                )
              })}
            </select>
            <select
              name="area-types"
              id="area-types-select"
              value={area}
              onChange={handleAreaUpdate}
            >
              {areaTypes.map(item => {
                return (
                  <option key={item.id} value={item.id}>
                    {item.name}
                  </option>
                )
              })}
            </select>
          </SelectBox>
          <Horizontal
            list={alphaTypes}
            title={'首字母：'}
            handleClick={handleAlphaUpdate}
            oldVal={alpha}
          ></Horizontal>
        </NavContainer>
        <ListContainer>
          <Scroll
            pullUpLoading={pullUpLoading}
            pullDownLoading={pullDownLoading}
            pullUp={handlePullUp}
            pullDown={handlePullDown}
          >
            {renderSingerList(singerList)}
          </Scroll>
          <Loading show={enterLoading}></Loading>
        </ListContainer>
      </Data>
      {renderRoutes(props.route.routes)}
    </div>
  )
}

export default connect(mapStateToProps, mapDispatchToProps)(Singers)
